/* ==========================================================================
   Your custom CSS styles
   ========================================================================== */
body{
    background-image: url("https://img0.baidu.com/it/u=3401676440,2482437422&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800");
    background-size: cover;
    background-position-x: center;
}
p1{
    font-size:20px;
}
p2{
    font-size:20px;
}
#title{
    font-size:50px;
    color:white;
    text-align:center;
    margin-bottom:-50px;
}
#footer{
    text-align:center;
}
#footer p1{
    font-size:20px;
    color:white;
}

#vcontainer {
    width:800px;
    height:1000px;
    margin: auto;
    position:relative;
}
#stack {
    background-color:white;
    box-shadow:  -6px -6px #00f2ea, inset -6px -6px #ff0050;
    height:110px;
    width:720px;
    margin: 40px auto;
    position:relative;
}
#over, #win{
    text-align:center;
    padding:50px;
    font-family:"HanziPen SC";
    font-weight:bold;
}
#over p, #win p, p, p1{
    font-size:35px;
    font-family:"HanziPen SC";
}
#over .button, #win .button {
    height:50px;
    width:150px;
    font-size:20px;
    text-align:center;
    font-family:"HanziPen SC";
    font-style:none;
    color:#000;
    padding:5px 20px;
    background-color: #EEEEEE;
    border: 3px solid #222;
    box-shadow: 2px 3px rgb(0 0 0 / 0.4);
    border-radius: 10px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
#shuffle{
    background-image:url("");
    background-size:60%;
    background-position: center;
    background-repeat: no-repeat;
    height:80px;
    width:80px;
}
#tools{
    margin:auto;
    width: fit-content;
}
#tools div{
    background-color: #eee;
    box-shadow: inset 6px 6px #00f2ea, 6px 6px #ff0050;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
#tools div:hover, #tools div:focus, #tools div:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #fff;
}
#tools div:hover{
    cursor:pointer;
}
.pg {
    height:700px;
    width:700px;
    margin: 30px auto;
    position:relative;
}
.card {
    margin:4px;
    outline: 3px solid #aaa;
    border-radius: 10px;
    box-shadow: 6px 9px rgb(0 0 0 / 0.4);
}
.clickable {
    cursor: pointer;
}
.unselectedcard{
    position:absolute;
}
.selectedcard{
    position:relative;
    float:left;
    margin-top:3px;
    margin-right:3px;
}
.shade{
    background-color:#000;
    opacity:70%;
    width:100%;
    height:100%;
    border-radius: 10px;
}

.clickable {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);

    -webkit-transition-property: transform;
    transition-property: transform;
}
.clickable:hover, .clickable:focus, .clickable:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}



div[type="paul"] {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/521/521.jpg");
    background-size: cover;
    background-position: center;
}
div[type="61"] {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/131/131.jpg");
    background-size: cover;
}
div[type="jiang"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/199/199.jpg");
    background-size: cover;
}
div[type="jiao"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/527/527.jpg");
    background-size: cover;
}
div[type="yz"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/140/140.jpg");
    background-size: cover;
}
div[type="shili"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/169/169.jpg");
    background-size: cover;
}
div[type="paopao"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/198/198.jpg");
    background-size: cover;
    background-position: center;
}
div[type="dan"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141.jpg");
    background-size: cover;
    background-position: center;
}
div[type="hong"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/191/191.jpg");
    background-size: cover;
    background-position: center;
}
/*div[type="jagger"]  {
    background-image: url("https://game.gtimg.cn/images/yxzj/img201606/heroimg/190/190.jpg");
    background-size: cover;
}*/
div[type="jagger"]  {
    background-image: url("../images/QQ图片20220924143141.jpg");
    background-size: cover;
    background-position: center;
}




/* ==========================================================================
   Your custom CSS styles for smartphones and screens smaller than 480 px
   ========================================================================== */

@media only screen and (max-width: 480px) {
    /* insert styles here */
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

/* Clearfix
 * Adding a 'clearfix' class will allow parent elements to contain a floated child element
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}